<!--结算单审核-->
<template>
  <el-dialog
    title="结算单审核"
    :visible.sync="$attrs.visableIf"
    @close="handleCloseDialog"
    width="80%"
    append-to-body
    class="borderb_dia"
  >
    <div class="mb_15">
      <div>广告收入明细</div>
    </div>
    <el-table
      :data="tableDataList"
      ref="allTableData"
      class="tableHightClass"
      :max-height="tableHeight"
    >
      <el-table-column
        :label="item.label"
        align="center"
        v-for="(item, index) in tableColumns"
        :key="index"
        :prop="item.key"
        :min-width="item.minWidth ? item.minWidth : ``"
        :fixed="item.fixed ? item.fixed : false"
        :show-overflow-tooltip="true"
      >
      </el-table-column>
    </el-table>
    <div slot="footer" class="footer-btn">
      <el-button @click="getShowReject">驳回</el-button>
      <el-button type="primary" @click="onSubmit">审核通过</el-button>
    </div>
    <settleReject v-if="showSettleReject" :visableIf.sync="showSettleReject" :jd_id="$attrs.rowitem.jd_id" @handleQuery="handleQuery" @getBiglist="getBiglist"></settleReject>
  </el-dialog>
</template>

<script>
import { reqPayDataCheckPass, reqPayDataInfoList, reqTrafficPosition } from '@/api/trafficMasterMgt'
import settleReject from './settleReject.vue'
export default {
  name: 'CheckOrder',
  components: { settleReject },

  data() {
    return {
      tableHeight: 300,
      showSettleReject:false,//
      queryParams: {
        id: this.$attrs.rowitem.custom_id
      },
      tableDataList: [],
      positionList: [],
      tableColumns: [
        { key: 'create_time', label: `日期`, minWidth: 160 },
        { key: 'all_coin', label: `总收入`, minWidth: 150 }
      ]
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getBiglist(){
      this.$emit('getList');
    },
    handleQuery() {
      this.queryParams.page = 1
      this.getList()
    },
    //重置表单
    resetQuery() {
      this.resetForm('queryForm')
      this.handleQuery()
    },
    getTrafficPosition() {
      //获流量的广告位
      reqTrafficPosition({ id: this.$attrs.rowitem.custom_id }).then(res => {
        console.log('广告位', res.data)
        this.positionList = res.data

      })
    },
    getTabList() {
      reqPayDataInfoList(this.queryParams).then((res) => {
        console.log('结算单列表', res.data)
        this.tableDataList = res.data.list
        this.positionList.forEach(item => {
          this.tableDataList.forEach(sitem => {
            for (let key in sitem.list_data) {
              if (key == item.id) {
                sitem['list_data.'+item.id]=sitem.list_data[key];
                let obj= {
                  key: 'list_data.'+item.id,
                  label:item.name,
                  visible: true,
                }
                this.tableColumns.push(obj);
              }
            }

          });

        });
        console.log('this.tableDataList',this.tableDataList);
        this.loading = false
      })
    },
    //审核的列表
    async getList() {
      await this.getTrafficPosition()
      this.getTabList()

    },
    onSubmit() {
      let form={
        id:this.$attrs.jd_id,
      }
      this.$modal.confirm(`确定要审批通过吗？`).then(() => {
        reqPayDataCheckPass(form).then(res => {
          this.$modal.msgSuccess('提交成功！');
          this.$emit('getList');
          this.handleCloseDialog();
        })

      })
    },
    getShowReject(){
      this.showSettleReject=true;
    },
    handleCloseDialog() {
      this.$emit('update:visableIf', false)
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep .el-dialog__body {
  height: calc(100vh - 250px);
}

.operate-Big {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px;
}

</style>
